<template>
    <div>
        <el-scrollbar>
            <div style="margin: 5px; float: left;">
                <el-input @keyup.enter="loadPost" v-model="name" placeholder="请输入名字" suffix-icon="el-icon-search"
                    style="width:200px;size: small;"></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="loadPost">查询</el-button>
                <el-button type="success" @click="resetQuery">重置</el-button>
            </div>
            <el-table :data="tableData" :header-cell-style="{ background: '#f2f5fc', color: '#555555' }" border>
                <el-table-column prop="userid" label="ID" width="120px"></el-table-column>
                <el-table-column prop="username" label="昵称" width="120px"></el-table-column>
                <el-table-column prop="majorid" label="专业" width="120px">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.majorid === '1' ? 'success' : (scope.row.majorid === '2' ? 'info' : (scope.row.majorid === '3' ? 'danger' : 'warning'))"
                            disable-transitions>{{
                                scope.row.majorid === '1' ? '计科' : (scope.row.majorid === '2' ? '信安' : (scope.row.majorid ===
                                    '3' ?
                                    '物联网' : '通信工程')) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="grade" label="年级" width="120px">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.grade === '1' ? 'success' : (scope.row.grade === '2' ? 'info' : (scope.row.grade === '3' ? 'danger' : (scope.row.grade === '4' ? 'warning' : 'info')))"
                            disable-transitions>{{
                                scope.row.grade === '1' ? '大一' : (scope.row.grade === '2' ? '大二' : (scope.row.grade === '3' ?
                                    '大三' :
                                    (scope.row.grade === '4' ? '大四' : '未知'))) }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="email" label="邮箱" width="180px">
                    <template #default="scope">
                        <el-tag :type="scope.row.email === '' ? 'warning' : 'success'" disable-transitions>{{
                            scope.row.email === '' ? '暂未填写' : scope.row.email }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone_number" label="电话号码" width="180px">
                    <template #default="scope">
                        <el-tag :type="scope.row.phone_number === null ? 'warning' : 'success'" disable-transitions>{{
                            scope.row.phone_number === null ? '暂未填写' : scope.row.phone_number }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="purview" label="身份" width="120px">
                    <template #default="scope">
                        <el-tag :type="scope.row.purview === 'Super Admin' ? 'success' : 'warning'" disable-transitions>{{
                            scope.row.purview === 'Super Admin' ? '管理员' : '用户' }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="个人信息" width="120px">
                    <template #default="scope">
                        <el-button size="small" type="success" @click="edituser(scope.row)">编辑</el-button>

                        <el-dialog v-model="dialogFormVisible" v-bind:title="form.username + '的个人信息'" :modal="false">
                            <el-form :model="form">
                                <el-form-item label="专业" :label-width="formLabelWidth">
                                    <el-input v-model="form.major" autocomplete="off" />
                                </el-form-item>
                                <el-form-item label="年级" :label-width="formLabelWidth">
                                    <el-input v-model="form.grade" autocomplete="off" />
                                </el-form-item>
                                <el-form-item label="邮箱" :label-width="formLabelWidth">
                                    <el-input v-model="form.email" autocomplete="off" />
                                </el-form-item>
                                <el-form-item label="电话号码" :label-width="formLabelWidth">
                                    <el-input v-model="form.phone_number" autocomplete="off" />
                                </el-form-item>
                            </el-form>
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取消修改</el-button>
                                    <el-button type="primary" @click="Changinfo">
                                        确认修改
                                    </el-button>
                                </span>
                            </template>
                        </el-dialog>
                    </template>
                </el-table-column>

                <el-table-column prop="operate2" label="修改密码" width="120px">
                    <template #default="scope">
                        <el-button size="small" type="warning" @click="initpassword(scope.row)">修改</el-button>
                        <el-dialog v-model="dialogFormVisible2" :title="formpass.username + '的密码'" :modal="false">
                            <el-form :model="formpass">
                                <el-form-item label="密码" :label-width="formLabelWidth">
                                    <el-input v-model="formpass.pass1" autocomplete="off" />
                                </el-form-item>
                                <el-form-item label="确认密码" :label-width="formLabelWidth">
                                    <el-input v-model="formpass.pass2" autocomplete="off" />
                                </el-form-item>
                            </el-form>
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="dialogFormVisible2 = false">取消修改</el-button>
                                    <el-button type="primary" @click="ChangePassword()">
                                        确认修改
                                    </el-button>
                                </span>
                            </template>
                        </el-dialog>
                    </template>
                </el-table-column>

                <el-table-column prop="operate3" label="删除用户">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗?" @confirm="del(scope.row.username)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
</template>

<script>
import { reactive, ref } from 'vue'
import $ from 'jquery';

export default {
    name: "MainBoard",
    setup() {
        let dialogFormVisible = ref(false)
        let dialogFormVisible2 = ref(false)
        let formLabelWidth = '140px'
        let tableData = ref([])
        let name = ref('')  //输入框里的name
        const form = reactive({
            username: ref(''),
            major: ref(''),
            grade: ref(''),
            email: ref(''),
            phone_number: ref(''),
        })
        const formpass = reactive({
            username: ref(''),
            pass1: ref(''),
            pass2: ref(''),
        })

        let initpassword = (user) => {
            formpass.username = user.username;
            formpass.pass1 = '';
            formpass.pass2 = '';

            dialogFormVisible2.value = true;
        }

        let ChangePassword = () => {
            if (formpass.pass1 !== formpass.pass2) {
                alert("两次密码不同!");
            }
            else if (formpass.pass1 === '') {
                alert("密码不能为空");
            }
            else if (formpass.pass1.length < 6) {
                alert("密码长度不能少于6位")
            }
            else {
                $.ajax({
                    url: "http://10.142.225.1:3000/user/changePassword",
                    type: "post",
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem("token")
                    },
                    data: {
                        username: formpass.username,
                        newpassword: formpass.pass1,
                    },
                    success(resp) {
                        alert(resp.message);
                    },
                    error() {
                        alert("失败");
                    }
                })
                dialogFormVisible2.value = false;
            }
            formpass.pass1 = '';
            formpass.pass2 = '';
        }

        let Changinfo = () => {
            if (localStorage.getItem('is_login') === "true") {
                $.ajax({
                    url: 'http://10.142.225.1:3000/user/edit',
                    type: "post",
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem("token")
                    },
                    data: {
                        username: form.username,
                        major: form.major,
                        grade: form.grade,
                        email: form.email,
                        phone_number: form.phone_number,
                    },
                    success: (resp) => {
                        alert(resp.message);
                        getusers();
                    }
                })
            }
            else {
                alert("请先登录")
            }
            dialogFormVisible.value = false;
        }

        let edituser = (user) => {
            form.username = user.username;
            form.major = user.majorid;
            form.grade = user.grade;
            form.email = user.email;
            form.phone_number = user.phone_number;
            dialogFormVisible.value = true;
        }

        let getusers = () => {
            if (localStorage.getItem('is_login') === "true") {
                $.ajax({
                    url: 'http://10.142.225.1:3000/user/all',
                    success: (resp) => {
                        tableData.value = resp;
                    }
                })
            }
            else {
                tableData = [];
            }
        }

        let loadPost = () => {
            if (localStorage.getItem('is_login') === "true") {
                if (name.value === '') getusers();
                else {
                    $.ajax({
                        url: 'http://10.142.225.1:3000/user/name/' + name.value,
                        success: (resp) => {
                            tableData.value = [];
                            if (resp !== '') {
                                tableData.value.push(resp);
                            }
                        }
                    })
                }
            }
            else {
                tableData.value = [];
            }

        }
        let resetQuery = () => {
            name.value = '';
            getusers();
        }
        let del = (delname) => {
            $.ajax({
                url: "http://10.142.225.1:3000/user/delete",
                type: "post",
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                },
                data: {
                    username: delname
                },
                success: (resp) => {
                    alert(resp.message);
                    resetQuery();
                }
            })
        }

        return {
            tableData,
            name,  //输入框里的name
            dialogFormVisible, dialogFormVisible2,
            formLabelWidth,
            form, formpass,
            del, resetQuery, loadPost, getusers, edituser, Changinfo, ChangePassword, initpassword,
        }
    },
    beforeMount() {
        this.getusers();
    }
}
</script>


<style >
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}
</style>